<template>
  <view class="police-status-list bg-white min-h-[100vh]">
    <up-list @scrolltolower="scrolltolower" height="100vh">
      <template v-if="list.length">
        <up-list-item v-for="(item, index) in list" :key="index">
          <view
            class="text-[28rpx] color-black px-3.5 box-border police-status-list-item"
          >
            <view class="pt-4.25 pb-3.25 box-border flex flex-row">
              <view class="left flex justify-center items-center w-[111rpx]">
                <up-avatar
                  :src="imgPrefix + item.avatar"
                  shape="circle"
                  size="111rpx"
                  mode="scaleToFit"
                ></up-avatar>
              </view>
              <view class="right ml-2.5 flex flex-col justify-between">
                <view class="flex flex-row items-center leading-[36rpx]">
                  <text class="font-bold">{{ item.userName }}</text>
                  <text class="mx-2.5">{{ item.badgeNumber }}</text>
                  <view class="tag-view">
                    <template v-if="item.dutyStatus != 3">
                      <uni-tag
                        text="在岗"
                        type="success"
                        custom-style="background-color: #33A954; border: none; color: #fff;font-size:25rpx; border-radius: 8rpx; height:35rpx; line-height:35rpx; padding: 4rpx 16rpx;"
                      />
                    </template>
                    <template v-else>
                      <uni-tag
                        text="不在岗"
                        type="success"
                        custom-style="background-color: #BBBBBB; border: none; color: #fff;font-size:25rpx; border-radius: 8rpx; height:35rpx; line-height:35rpx; padding: 4rpx 16rpx;"
                      />
                    </template>
                  </view>
                  <text class="mx-2.5 text-[25rpx]" v-if="item.dutyStatus == 1"
                    >（外出）</text
                  >
                  <text class="mx-2.5 text-[25rpx]" v-if="item.dutyStatus == 2"
                    >（巡逻）</text
                  >
                  <text
                    class="mx-2.5 text-[25rpx]"
                    v-if="item.dutyStatus == 3"
                    >{{
                      item.reportStatus == 0 ? "（未报备）" : "（已报备）"
                    }}</text
                  >
                </view>
                <view class="flex flex-row items-center">
                  <text>{{ item.communityName }}</text>
                  <text class="mx-2.5" @click="callPhone(item.phonenumber)">{{
                    item.phonenumber
                  }}</text>
                  <view
                    class="text-[#038AFE] border-[0.7rpx] border-solid border-[#038AFE] px-1.75 absolute right-3.25"
                    @click="scanClockRecord(item.policeUserId)"
                    >打卡记录</view
                  >
                </view>
              </view>
            </view>
            <view class="btm-line"></view>
          </view>
        </up-list-item>
      </template>
      <up-empty
        v-else
        mode="data"
        text="暂无数据"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
      >
      </up-empty>
      <up-gap height="10"></up-gap>
    </up-list>
  </view>
</template>
<script setup lang="ts">
import norAvatar from "@/static/icon/avatar.png";
import { allPoliceOfCommunity } from "@/api/police/index";
import { imgPrefix } from "@/config/app";
import { callPhone } from "@/utils/tools";

const uToastRef = <any>ref(null);
const data = reactive({
  queryParam: {
    // pageNum: 1,
    // pageSize: 10,
  },
  list: <any>[],
  total: 0,
});
const { queryParam, list, total } = toRefs(data);

// 查询民警列表
const getPoliceList = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  allPoliceOfCommunity(queryParam.value)
    .then((res: any) => {
      uni.hideLoading();
      const { data } = res;
      list.value = data ?? [];
    })
    .catch((err: any) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

onLoad(() => {
  getPoliceList();
});

const scrolltolower = () => {
  getPoliceList();
};

const scanClockRecord = (userId: number) => {
  uni.navigateTo({
    url: `/subPages/police/clock/clockRecord?userId=${userId}`,
  });
};
</script>
<style lang="scss" scoped>
.police-status-list {
  &-item {
    .right {
      width: calc(100% - 111rpx - 20rpx);
    }
  }
  .btm-line {
    width: 100%;
    border-top: 0.7rpx solid #bbbbbb;
  }
}
</style>
